<template>
  <div class="login-main-box">
    <el-button type="primary" @click="login">登录</el-button>
    <el-menu
      :collapse="false"
      :unique-opened="true"
      active-color="#3471FF"
      router
    >
      <!-- 菜单组件，递归 -->
      <MyNavMenu :menus="permissionStore.menus"></MyNavMenu>
    </el-menu>
  </div>
</template>

<script setup>
import { usePermissionStore } from '@/store'
import { useUserStore } from '@/store'
import { useRouter } from 'vue-router'
import MyNavMenu from '@/components/MyNavMenu.vue'

const router = useRouter()
const permissionStore = usePermissionStore()

async function login() {
  useUserStore().setUser({ role: 'admin' })

  permissionStore.setPermissions()

  // router.push('/users')
}
</script>

<style lang="scss" scoped>
.login-main-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
